<template>
  <div>
    <div class="shan-nav">
        <span v-for="(v,i) in arr" :key="i" @click="fun(i)">{{v.title}}</span>
    </div>

<keep-alive>
  <component :is="com"> </component>
</keep-alive>
    
  </div>
</template>

<script>
import Shanpage0 from "@/views/shan-navpage/page1.vue"
import Shanpage1 from "@/views/shan-navpage/page2.vue"
import Shanpage2 from "@/views/shan-navpage/page3.vue"
import Shanpage3 from "@/views/shan-navpage/page4.vue"

export default {
    components:{
        Shanpage0,Shanpage1,Shanpage2,Shanpage3
    },
    data(){
        return{
            arr:[
                {title:"热门推荐"},
                {title:"情感美剧"},
                {title:"花式怼人"},
                {title:"撩人情话"},
                {title:"追星专用"},
                {title:"朋友圈配文"},
                {title:"聊天必备"},
                {title:"游戏必备"},
            ],
            com:"Shanpage0"
        }
    },
    methods:{
        fun(id){
            this.com="Shanpage"+id
        }
    }
}
</script>

<style scoped>
/* 闪光导航 */
  .shan-nav{
    width: 100%;
    height: 0.2rem;
    display: flex;
    /* flex-wrap: nowrap; */
    align-items: center;
    overflow-x: auto;
  }
  .shan-nav::-webkit-scrollbar{
    display: none;
  }
  .shan-nav span{
    margin-right: 0.1rem;
    display: block;
    flex-shrink: 0;
    margin-left: 0.1rem;
    font-size: 0.12rem;
  }
  .shan-nav span:hover{
      color: violet;
      font-weight: bold;
      font-family: 'Times New Roman', Times, serif;
      font-size: 0.16rem;
  }
</style>